<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="plugins/element-ui/index.css" />
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/login.css">
    <link rel="stylesheet" href="styles/icon/iconfont.css" />
    <title>外卖系统后台登录</title>
  </head>
  <body>
    <div class="container" >
      <div class="forms-container">
        <div class="signin-signup">
          <form action="#" >
            <h2 class="title">后台登录</h2>
            <div class="login" id="login-app">
              <div class="login-box">
                <div class="login-form">
                  <el-form ref="loginForm" :model="loginForm" :rules="loginRules" >

                    <el-form-item prop="username">
                      <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" maxlength="20"
                                prefix-icon="iconfont icon-user" />
                    </el-form-item>
                    <el-form-item prop="password">
                      <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="iconfont icon-lock" maxlength="20"
                                @keyup.enter.native="handleLogin" />
                    </el-form-item>
                    <el-form-item style="width:100%;">
                      <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
                                 @click.native.prevent="handleLogin">
                        <span v-if="!loading">立即登录</span>
                        <span v-else>登录中...</span>
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>

          </form>


        </div>
      </div>

      <div class="panels-container">
        <div class="panel left-panel">
          <div class="content">
            <h3>欢迎使用</h3>
            </br>
            </br>
            <h3>外卖后台管理系统</h3>


          </div>
          <img src="images/log.svg" class="image" alt="" />
        </div>

      </div>
    </div>

    <script src="js/app.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="plugins/axios/axios.min.js"></script>
    <script src="js/request.js"></script>
    <script src="js/validate.js"></script>
    <script src="api/login.js"></script>

    <script>
      new Vue({
        el: '#login-app',
        data() {
          return {
            loginForm:{
              username: 'Q',
              password: '1234567'
            },
            loading: false
          }
        },
        computed: {
          loginRules() {
            const validateUsername = (rule, value, callback) => {
              if (value.length < 1 ) {
                callback(new Error('请输入用户名'))
              } else {
                callback()
              }
            }
            const validatePassword = (rule, value, callback) => {
              if (value.length < 6) {
                callback(new Error('密码必须在6位以上'))
              } else {
                callback()
              }
            }
            return {
              'username': [{ 'validator': validateUsername, 'trigger': 'blur' }],
              'password': [{ 'validator': validatePassword, 'trigger': 'blur' }]
            }
          }
        },
        created() {
        },
        methods: {
          async handleLogin() {
            this.$refs.loginForm.validate(async (valid) => {
              if (valid) {
                this.loading = true
                let res = await loginApi(this.loginForm)

                if (res.flag == 1) {//1表示登录成功。

                  localStorage.setItem('userInfo',JSON.stringify(res.data))
                  window.location.href= 'http://localhost:8889/api/static/index.html'
                } else {
                  this.$message.error(res.msg)
                  this.loading = false
                }
              }
            })
          }
        }
      })
    </script>
  </body>
</html>
